<template>
<!-- 书籍单一类目下书籍 -->
    <div>
        <Header :Title='title' :Type="type"></Header>
            <van-list
                v-model="loading"
                :finished="finished"
                offset='10'
                :immediate-check='true'
                finished-text="没有更多了"
                @load="Loading">
                    <van-grid :border='false'>
                        <van-grid-item 
                            v-for="(i,j) in classDetailsList" 
                            :key='j'
                            @click='goBookDetails(i.id)'>
                            <img class="cover" :src='i.cover' alt="">
                            <p>{{i.title}}</p>
                            <img class="status" src="../assets/image/wanjie@2x.png" alt="" v-if="i.over==1">
                            <img class="status" src="../assets/image/lianzai@2x.png" alt="" v-else>
                        </van-grid-item>
                    </van-grid>
             </van-list>
        <DownLoad></DownLoad>
        <Footer></Footer>
    </div>
</template>
<script>
import Header from '@/components/Header.vue'
import Footer from '@/components/Footer.vue'
import DownLoad from '@/components/DownLoad.vue'
export default {
    name:'ClassDetails',
    props:{

    },
    components: {
        Header,
        Footer,
        DownLoad,
    },
    data(){
        return{
            title:'武侠',
            type:3,
            classDetailsList:[],
            id:'',
            // 无限加载
            loading: false,
            finished: false,
            page:1,
        }
    },
    created(){
        this.id = this.$route.params.id
        this.title = this.$route.params.name
        this.Check()
    },
    methods:{
        Check(){
            this.$api.Preflight().then(res=>{
                if(res.errorno == 200){
                    this.getNovel()
                }
            }).catch((()=>{
                console.log('请求出错')
            }))
        },
        getNovel(){
            let params={
                m_id:this.id,
                page:this.page,
                size:16
            }
            this.$api.getNovel(params).then(res=>{
                if(res.errorno == 200){
                    this.classDetailsList=this.classDetailsList.concat(res.data)
                    this.loading=false
                }
            }).catch(()=>{
                this.loading=false
                console.log('请求出错')
            })
        },
        goBookDetails(v){
            this.$router.push({
                name:'BookDetails',
                params:{
                    id:v
                }
            })
        },
        // 加载
        Loading(){
            this.page++
            this.Check()
        }
    }
}
</script>
<style lang="stylus" scoped>
.van-grid
    padding .16rem
    background-color #fff
.van-grid-item 
    p
        font-size .28rem
        height .64rem
        line-height .84rem
        color #222
        overflow hidden
    .cover
        width 100%
        height 75%
    .status
        position absolute
        width 50%
        height 35%
        top .12rem
        left .16rem
    >>> .van-grid-item__content
        display flex
        flex-direction column
        justify-content space-between
        padding .12rem .16rem

    

</style>
